// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store'
// import '@/config/rem' // 配置flex
import 'normalize.css' // 重置样式表
// import '@/styles/element-ui-style.css' // 重置样式表
import ElementUI from 'element-ui'
import './../theme/index.css'
import qs from 'qs'
import { computedIntegral } from './util/filters.js'
import SvgIcon from '@/components/Icon/SvgIcon.vue' // svg组件
import VAnimateCss from 'v-animate-css'
import 'animate.css'

Vue.use(VAnimateCss)

// 注册到全局
Vue.component('icon-svg', SvgIcon)

const requireAll = requireContext => requireContext.keys().map(requireContext)

const req = require.context('./assets/svg', false, /\.svg$/)
requireAll(req)
const activityIcon = require.context('./assets/svg/activity', false, /\.svg$/)
requireAll(activityIcon)
const orderDetailIcon = require.context('./assets/svg/order-detail', false, /\.svg$/)
requireAll(orderDetailIcon)

Vue.use(ElementUI)
Vue.prototype.$message = ElementUI.Message
Vue.prototype.$qs = qs
// 阻止启动生产消息
Vue.config.productionTip = false
Vue.filter('computedIntegral', computedIntegral)
Vue.filter('money', function (value) {
  if (!value) return '0.00'
  var val = value.toFixed(2)
  var intPart = Number(val).toFixed(0)
  var intPartFormat = intPart.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,')
  var floatPart = '.00'
  val = value.toString()
  var value2Array = value.split('.')
  if (value2Array.length === 2) {
    floatPart = value2Array[1].toString()
    if (floatPart.length === 1) {
      return intPartFormat + '.' + floatPart + '0'
    } else {
      return intPartFormat + '.' + floatPart
    }
  } else {
    return intPartFormat + floatPart
  }
})
// 防止连点
Vue.directive('throttle', {
  inserted (el, binding) {
      el.addEventListener('click', () => {
          el.style.pointerEvents = 'none'
          if (!el.disabled) {
              setTimeout(() => {
                  el.style.pointerEvents = 'auto'
              }, binding.value || 2000)
          }
      })
  }
})
// console.log(useIntersectionObserver)
// 图片懒加载
Vue.directive('lazy', {
  inserted (el, {value}) {
    const options = {
      threshold: 0.5 // 触发回调的阈值，当元素50%进入视口时触发回调
    }
    const intersectionObserver = new IntersectionObserver((entries) => {
      entries.forEach((entry) => {
        if (entry.isIntersecting) {
          // 进入视口，加载资源
          el.src = value
          intersectionObserver.unobserve(el) // 只加载一次，加载后取消观察
        }
      })
    }, options)

    intersectionObserver.observe(el)
    // return
    // el.src = 'https://vpigshop.oss-cn-hangzhou.aliyuncs.com/shop/2023-07-17/d83417a819de4cd191d66c89984cb908_1.jpg'
    // const { stop } = useIntersectionObserver(
    //   el,
    //   // isIntersecting 布尔值，元素可见为 true，元素不可见为 false
    //   ([{ isIntersecting }], observerElement) => {
    //     // console.log('目标元素的可见性', isIntersecting)
    //     // 如果目标可见，发送请求
    //     // el.style.backgroud = 'url(/img/load.88daf935.gif) no-repeat center / 50% 50%'
    //     if (isIntersecting) {
    //       // console.log('可以用lazy自定义指令替换src属性了')
    //       // 如果目标可见，替换图片地址，自动加载图片
    //       el.src = value
    //       // 如果图片地址是错误的，无法加载图片，显示占位图
    //       el.addEventListener('error', () => {
    //         // el.src = defaultImg
    //       })
    //       // 主动停止检测元素可见性
    //       el.onload = () => {
    //         el.style.backgroud = ''
    //         stop()
    //       }
    //     }
    //   })
  }
})

Vue.prototype.openLoading = function () {
  const loading = this.$loading({ // 声明一个loading对象
    lock: true, // 是否锁屏
    target: '.sub-main', // 需要遮罩的区域
    body: true,
    background: '#ffffff',
    customClass: 'mask' // 遮罩层新增类名
  })
  setTimeout(function () { // 设定定时器，超时5S后自动关闭遮罩层，避免请求失败时，遮罩层一直存在的问题
    loading.close() // 关闭遮罩层
  }, 5000)
  return loading
}
router.afterEach((to, from, next) => {
  window.scrollTo(0, 0)
})
/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store,
  components: { App },
  template: '<App/>'
})
